<template>
  <view>
    <view class="top-card">
      <u-navbar
        placeholder
        title="我的账户"
        auto-back
        bg-color="transparent"
      ></u-navbar>
      <view class="px-12 top-box">
        <u-gap height="90rpx"></u-gap>
        <view class="accountInfo-top">
          <view class="top-tip">
            <u-icon
              name="arrow-right"
              size="20rpx"
              color="#fff"
              label-pos="left"
              label-color="#fff"
              label="累计已结算1000元"
              label-size="20rpx"
            ></u-icon>
          </view>
          <view class="text-12"> 可提现金额 </view>
          <view class="pt-10">
            <text>￥</text>
            <text class="text-24 text-bold">
              {{ customerAccount.balance || 0 }}</text
            >
          </view>
        </view>
        <view class="info-card grid-2 gap-48">
          <view>
            <view class="flex items-center">
              <u-icon
                name="question-circle"
                size="24rpx"
                color="#333"
                label-pos="left"
                label-color="#333"
                label="自购返现"
                label-size="24rpx"
              ></u-icon>

              <view class="detail-tag">
                <view class="text-10 color-black"> 明细</view>
                <u-icon
                  name="arrow-right"
                  size="20rpx"
                  label-pos="left"
                  label-color="#333"
                ></u-icon>
              </view>
            </view>
            <view class="py-8">
              <text>￥</text>
              <text class="text-24">{{ customerAccount.balance || 0 }}</text>
            </view>
            <u-button
              type="primary"
              size="mini"
              text="提现"
              shape="circle"
              :custom-style="{
                padding: '4rpx 8rpx',
                width: 'fit-content',
                margin: 0,
              }"
              @click="goWithdrawDeposit"
            ></u-button>
          </view>
          <view>
            <view class="flex">
              <u-icon
                name="question-circle"
                size="24rpx"
                color="#333"
                label-pos="left"
                label-color="#333"
                label="分享奖励"
                label-size="24rpx"
              ></u-icon>
              <view class="detail-tag">
                <view class="text-10 color-black"> 明细</view>
                <u-icon
                  name="arrow-right"
                  size="20rpx"
                  label-pos="left"
                  label-color="#333"
                ></u-icon>
              </view>
            </view>
            <view class="py-8">
              <text>￥</text>
              <text class="text-24">{{ customerAccount.balance || 0 }}</text>
            </view>
            <u-button
              type="primary"
              size="mini"
              text="提现"
              shape="circle"
              :custom-style="{
                padding: '4rpx 8rpx',
                width: 'fit-content',
                margin: 0,
              }"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
    <view
      class="text-12 flex items-center justify-center color-gray pt-12 pb-20"
    >
      <text class="mr-10"> 每月25-31号可提现上月结算收益 </text>

      <u-icon
        name="question-circle"
        size="24rpx"
        color="#01ba90"
        label-pos="left"
        label-color="#01ba90"
        label="结算与提现说明"
        label-size="24rpx"
      ></u-icon>
    </view>
    <u-tabs
      :list="tabList"
      line-color="#8ac7b0"
      :scrollable="false"
      :activeStyle="{
        color: '#8ac7b0',
        transform: 'scale(1.05)',
      }"
      :inactiveStyle="{
        color: '#666',
        transform: 'scale(1)',
      }"
      itemStyle="height: 44px;"
    >
    </u-tabs>
    <view class="p-12 info-card">
      <u-tabs
        :list="timeList"
        line-color="transparent"
        line-height="0"
        :activeStyle="{
          border: '1rpx solid #6acaaf',
          borderRadius: '100rpx',
          fontSize: '24rpx',
          padding: '4rpx 16rpx',
          color: '#8ac7b0',
        }"
        :inactiveStyle="{
          background: '#9e9e9e1c',
          borderRadius: '100rpx',
          padding: '4rpx 16rpx',
          color: '#666',
          fontSize: '24rpx',
        }"
        :itemStyle="{ height: 'fit-content' }"
      >
      </u-tabs>
      <view class="grid-4 gap-10 color-gray pt-12">
        <view
          v-for="(item, index) in orderList"
          :class="{ itemCard: true, activeCard: item.num == currentOrderNum }"
		  @click="handelOrderList(item)"
        >
          <view>{{ item.num }}</view>
          <view class="text-12">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <view class="order-card mt-12 text-12">
      <view class="order-sub-card">
        <view class="flex justify-between items-center">
          <view class="flex items-center">
            <view class="w-80">订单编号</view>
            <u-icon
              name="arrow-right"
              size="24rpx"
              color="#666"
              label-pos="left"
              label="0274848292871"
            ></u-icon>
          </view>
          <view>
            <text>+</text>
            <text>5.83</text>
          </view>
        </view>
        <view class="flex justify-between color-black pt-10 text-12">
          <view class="flex line-height-18">
            <view class="w-80">待结算</view>
            <view>
              <view>下单时间：2021-08-01</view>
              <view class="pt-4">预计结算时间：2021-08-01</view>
            </view>
          </view>
          <u-tag type="primary" plain text="自购" size="mini"></u-tag>
        </view>
      </view>
      <view class="mt-12 flex order-sub-card">
        <u-image width="140rpx" height="140rpx"></u-image>
        <view class="pl-12 flex-col justify-between color-black">
          <view>
            <view class="ellipsis-1 text-12"> 5包减少5元 牛肉 </view>
            <view class="ellipsis-1 text-12 color-gray"> 牛肉丸200g/袋</view>
          </view>
          <view class="text-10 flex red-tip-tag">
            <view class="bg-red">返现</view>
            <view class="px-2">￥5.83</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fetchCustomerAccount } from "@/services/api";

export default {
  data() {
    return {
      tabList: [{ name: "自购返现" }, { name: "分享奖励" }],
      timeList: [
        { name: "今日" },
        { name: "昨日" },
        { name: "本月" },
        { name: "上月" },
        { name: "全部" },
      ],
	  currentOrderNum: '1',
      orderList: [
        { label: "待结算订单", num: "1" },
        { label: "待结算金额", num: "2" },
        { label: "已结算订单数", num: "3" },
        { label: "已结算金额", num: "4" },
      ],
      customerAccount: {},
    };
  },
  methods: {
	handelOrderList(item){
	  this.currentOrderNum = item.num
	},
    /**
     * 前往提现页面
     */
    goWithdrawDeposit() {
      this.$Router.push({
        name: "withdrawDeposit",
      });
    },

    async getCustomerAccount() {
      const { data, error } = await fetchCustomerAccount();

      if (!error) {
        const { balance, pendingSettlement, accumulatedIncome } = data;
        this.customerAccount = {
          balance: balance ? { balance: balance.balance || 0 } : { balance: 0 },
          pendingSettlement: pendingSettlement
            ? { balance: pendingSettlement.balance || 0 }
            : { balance: 0 },
          accumulatedIncome: accumulatedIncome
            ? { balance: accumulatedIncome.balance || 0 }
            : { balance: 0 },
        };
      }
    },
  },
};
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.top-card {
  background: linear-gradient(155deg, #d3ede8 0%, #edf4f5 100%);
}
.info-card {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
}
.red-tip-tag {
  border-radius: 8rpx;
  width: fit-content;
  .bg-red {
    background: red;
    color: white;
    padding: 0 4rpx;
  }

  color: $u-error;
  border: 1rpx solid $u-error;
}
.itemCard {
  background: #9e9e9e1c;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx 0;
  border-radius: 12rpx;
}
.activeCard {
  background: #f4fdfc;
  border: 1rpx solid $u-primary;
}
.order-card {
  background: #fff;
  padding: 24rpx;
  border-radius: 24rpx;
  .order-sub-card {
    background: #f5f5f5;
    padding: 20rpx;
    border-radius: 24rpx;
  }
}
.top-box {
  position: relative;
  .accountInfo-top {
    padding: 24rpx;
    border-radius: 12rpx;
    background: linear-gradient(155deg, #01ba90 0%, #65c794 100%);
    color: white;
    height: 150rpx;
    position: absolute;
    top: 0;
    left: 48rpx;
    width: calc(100% - 96rpx);
    box-sizing: border-box;
    .top-tip {
      font-size: 20rpx;
      position: absolute;
      right: 0;
      padding: 8rpx 16rpx;
      border-radius: 100rpx 0 0 100rpx;
      background: rgba(0, 0, 0, 0.2);
    }
  }
  .info-card {
    padding: 90rpx 48rpx 24rpx 48rpx;
    box-sizing: border-box;
    background: white;
    border-radius: 12rpx;

    .detail-tag {
      border: 1rpx solid #333;
      border-radius: 100rpx;
      padding: 4rpx 8rpx;
      margin-left: 8rpx;
      display: flex;
      align-items: center;
    }
  }
}
</style>
